<template>
	<view class="page-box">
		<view class="top"></view>
		<view class="box1" v-if="bookData.id">
			<view class="box-class d_flex j_b" @click="toList">
				<view class="book">
					<image v-if="bookData.imgUrl" :src="bookData.imgUrl" mode=""></image>
					<image v-else src="/static/b1.png" mode=""></image>
				</view>
				<view class="info">
					<view class="row d_flex j_b items-center">
						<view class="name">{{bookData.name}}</view>
						<view class="ku" @click.stop="selectBook">词库</view>
					</view>
					<view class="pro">
						<u-line-progress :percentage="parseInt((bookData.graspTotal*100)/bookData.total)" :height="12"
							activeColor="#5480F8" inactiveColor="#F2F3F8" :showText="false"></u-line-progress>
					</view>
					<view class="status d_flex_b">
						<view class="item">
							<text class="label">已学</text><text style="margin-left: 10rpx;" class="num">{{bookData.graspTotal}}</text>
						</view>
						<view class="item">
							<text class="label">总词数 {{bookData.total}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="day d_flex text-center">
				<view class="item">
					<view class="name">今日背诵</view>
					<view class="val"><text class="d">{{bookData.dayGraspTotal}}</text>/{{bookData.dayNeedGraspTotal}}</view>
				</view>
				<view class="item">
					<view class="name">今日复习</view>
					<view class="val"><text class="d">{{bookData.reviewNum}}</text>/{{bookData.reviewTotal}}</view>
				</view>
			</view>
			<button class="btn" @click="remember">开始背词</button>
		</view>
		<view class="box1" v-else>
			<view class="box-class d_flex_b">
				<view class="book">
					<image src="https://sqh-1311961031.cos.ap-nanjing.myqcloud.com/%E7%BB%84%20134%402x_1716772949945.png"
						mode=""></image>
				</view>
				<view class="info">
					请选择一本词书
				</view>
			</view>
			<button class="btn" @click="selectBook">选择词书</button>
		</view>
		<!--
		<view class="nav d_flex_b">
			<view class="item d_flex_c" @click="toPath('/pagesA/pages/test/test')">
				<image src="/static/n1.png" mode=""></image>
				<view class="name">中文选词</view>
			</view>
			<view class="item d_flex_c" @click="toPath('/pagesA/pages/test/tk-test')">
				<image src="/static/n2.png" mode=""></image>
				<view class="name">填空拼写</view>
			</view>
			<view class="item d_flex_c" @click="toPath('/pagesA/pages/test/test1')">
				<image src="/static/n3.png" mode=""></image>
				<view class="name">看词选义</view>
			</view>
		</view>
    -->
		<view class="box2">
			<view class="title">复习巩固</view>
			<view class="list d_flex_b">
				<view class="item d_flex_b" @click="toPath('/pagesA/pages/test/review')">
					<view class="name">复习</view>
					<image src="/static/a1.png" mode=""></image>
				</view>
				<view class="item d_flex_b" @click="toPath('/pages/misnomer/list')">
					<view class="name">错词本</view>
					<image src="/static/a3.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="title">学习中心</view>
			<view class="list d_flex_b">
				<view class="item d_flex_b" @click="toPath('/pages/quick/quick')">
					<view class="name">快闪</view>
					<image src="/static/a2.png" mode=""></image>
				</view>
				<view class="item d_flex_b" @click="toPath('/pages/report/report')">
					<view class="name">学习报告</view>
					<image src="/static/a5.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
		WebSocketClient
	} from "@/util/WebSocketClient";
	export default {
		data() {
			return {
				bookData: {},
				userInfo: {},
				userMoreData: '',
				isInit: true,
				isHide: false,
				isAppHide: false,
			}
		},
		async onLoad() {
			console.log('index-onLoad=')
			if (uni.getStorageSync('tokenValue')) {
				this.getUserinfo(true);
			}else{
				this.getUserinfo();
			}
			// uni.login({
			// 	success: async (loginRes) => {
			// 		const {
			// 			code,
			// 			data
			// 		} = await this.$http.post('api/user/wechat/applet/login', {
			// 			code: loginRes.code
			// 		}, 1)
			// 		if (code === 200) {
			// 			uni.setStorageSync('tokenValue', data.tokenValue)
			// 			await this.getUserinfo()
			// 			//首页登录完成，进行Websocket连接
			// 			this.$tool.testWebsocket()
			// 		}
			// 	}
			// })
			
		},
		onShow() {
			// console.log('this.isInit=',this.isInit)
			// this.$tool.testWebsocket()
			this.isHide = false;
			if (this.isAppHide) {
				// console.warn('小程序最小化=》页面回显')
				this.isAppHide = false
			}
			if (this.isInit) {
				this.isInit = false
				return
			}
			if (uni.getStorageSync('tokenValue')) {
				this.getUserinfo(true);
			}

		},
		onHide() {
			this.isHide = true;
		},
		onPullDownRefresh() {
			this.getCurBook();
			this.getUserinfo();

			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000)
		},
		watch: {
			isHide(newVal) {
				var pages = getCurrentPages()
				var page = pages[pages.length - 1].route
				// console.warn('isHide', newVal, pages, page, pages.length)
				// 判断页面隐藏时,是否停留在当前页面
				if (newVal && 'pages/index/index' == page) {
					// console.warn('小程序最小化')
					this.isAppHide = true
				}
			}
		},
		methods: {
			//获取当前用信息
			getUserinfo(isLogin=false) {
				return new Promise((resolve)=>{
					this.$http.get1('/qh/user/info', undefined, undefined, {
						isLogin: isLogin
					}).then(res => {
						if (res.code == 200) {
							this.userInfo = res.data.user;
							this.userMoreData = res.data;
							uni.setStorageSync('userInfo', this.userInfo);
							uni.setStorageSync('userMoreData', this.userMoreData);
			 				this.getCurBook();
							resolve()
						} else {
							this.userInfo = {};
							this.userMoreData = {}
						}
					})
				})
				
			},
			//页面跳转
			toPath(url) {
				if (!uni.getStorageSync('tokenValue')) {
					uni.showToast({
						title: '未登录，请先进行登录',
						icon: 'none',
						mask: true,
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
					return;
				}
				uni.navigateTo({
					url,
				})
			},
			remember(e) {
				if (!uni.getStorageSync('tokenValue')) {
					uni.showToast({
						title: '未登录，请先进行登录',
						icon: 'none',
						mask: true,
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
					return;
				}
				let isOver = false;
				
				uni.navigateTo({
					url: '/pages/remember/remember?id=' + this.bookData.id + '&isGroup=' + this.bookData.isGroup + '&tit=' +
					encodeURIComponent(this.bookData.name) + '&groupId=' + this.bookData.currentGroupId
				})
			},
			//获取当前学习的书籍
			getCurBook() {
				this.$http.put('api/client/word/currentBook?userId=' + this.userInfo.id, {
					userId: this.userInfo.id
				}).then(res => {
					if (res.code == 200 && res.data) {
						this.bookData = res.data;
						uni.setStorageSync('curBook', this.bookData);
					}
				})
			},
			selectBook() {
				if (!uni.getStorageSync('tokenValue')) {
					uni.showToast({
						title: '未登录，请先进行登录',
						icon: 'none',
						mask: true,
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
					return;
				}
				uni.navigateTo({
					// url: '/pages/group/BookType',
					url: `/pages/group/group`
				})
			},
			toList() {
				if (this.bookData.isGroup == 1) {
					uni.setStorageSync('curBookData', this.bookData);
					uni.navigateTo({
						url: '/pages/book/list?id=' + this.bookData.id + '&isGroup=' + this.bookData.isGroup
					})
				} else {
					uni.navigateTo({
						url: '/pages/book/book?id=' + this.bookData.id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>